<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/node_modules/axios/dist/axios.js"></script>

</head>

<body>
    <div class="container">
        <div class="page-header">
            其他使用
        </div>
        <button type="button" class="btn btn-primary">发送GET请求</button>
        <button type="button" class="btn btn-danger">发送POST请求</button>
        <button type="button" class="btn btn-success">发送PUT请求</button>
        <button type="button" class="btn btn-warning">发送DELETE请求</button>
    </div>

    <script>
        const btns = document.querySelectorAll("button");
        // GET async 和 awiat 结合使用
        btns[0].onclick =
            async function () {
                try {
                    const res = await axios.request({
                        method: "GET",
                        url: "http://127.0.0.1:3000/comments"
                    })
                    console.log(res);
                } catch (error) {
                    console.log(error);

                }
                // const res = await axios.request({
                //     method: "GET",
                //     url: "http://127.0.0.1:3000/comments"
                // })
                // .then(response => {
                //     console.log(response);
                // }).catch(error => {
                //     console.log(error);
                // })
            }
        // POST
        btns[1].onclick = function () {
            axios.post("http://127.0.0.1:3000/comments", {
                "body": "这是一条评论",
                "postId": 2
            }).then(response => {
                console.log(response);
            }).catch(error => {
                console.log(error);
            })
        }

    </script>

</body>

</html>